<template>
    <div class="page-common-layout">
      <div class="page-common-content">
        <!--&lt;!&ndash;登录日志工具栏&ndash;&gt;-->
        <tool-bar v-if="activeKey=='1'"
                  @search="$refs.loginLog.$refs.table.refresh(true)"
                  @reset="() => {
                          (this.loginLogQueryParam = {}), $refs.loginLog.$refs.table.refresh(true);
                                this.startTime = [];
  
                      }
                  "
        >
          <template slot="toolForm">
            <a-form-item :label="$ct('loginTime','登录时间')">
              <a-range-picker style="width: 280px"
                              :ranges="{
                                '今天': [moment(), moment()],
                                '最近一周': [ moment().add(-1, 'W'),moment()],
                                '最近一个月': [moment().add(-1, 'M'),moment()] ,
                                '最近三个月': [ moment().add(-3, 'M'),moment()]
                              }"
                              :placeholder="[$ct('StartTime','开始时间'), $ct('EndTime','结束时间')]"
                              :valueFormat="'YYYY-MM-DD'"
                              @change="startTimeOnChange1"
                              v-model="startTime"
              />
            </a-form-item>
            <a-form-item :label="$ct('loginAccount','登录账号')" class="margin-right-sm">
              <a-input v-model="loginLogQueryParam.userNameId" :placeholder="$ct('loginAccount','登录账号')"/>
            </a-form-item>
          </template>
        </tool-bar>
        <tool-bar v-else-if="activeKey=='2'"
                  @search="$refs.operationLog.$refs.table.refresh(true)"
                  @reset="
        () => {
        (this.oLogQueryParam = {}), $refs.operationLog.$refs.table.refresh(true);
        this.startTime = [];
        this.oLogQueryParam.operationType = 'requestLog.01';
        }
        "
        >
          <!--search -->
          <template slot="toolForm">
            <a-form-item :label="$ct('requestTime','请求时间')">
              <a-range-picker style="width: 280px"
                              :ranges="{
        '今天': [moment(), moment()],
        '最近一周': [ moment().add(-1, 'W'),moment()],
        '最近一个月': [moment().add(-1, 'M'),moment()] ,
        '最近三个月': [ moment().add(-3, 'M'),moment()]
        }"
                              :placeholder="[$ct('StartTime','开始时间'), $ct('EndTime','结束时间')]"
                              @change="startTimeOnChange2"
                              :valueFormat="'YYYY-MM-DD'"
                              v-model="startTime"
              />
            </a-form-item>
            <a-form-item :label="$ct('requestAccount','请求账号')" class="margin-right-sm">
              <a-input v-model="oLogQueryParam.userNameId" :placeholder="$ct('requestAccount','请求账号')"/>
            </a-form-item>
          </template>
        </tool-bar>
        <!--&lt;!&ndash;&lt;!&ndash;&lt;!&ndash;操作日志工具栏&ndash;&gt;&ndash;&gt;&ndash;&gt;-->
        <a-tabs  default-active-key="1" :activeKey="activeKey" @change="tabsChange">
          <a-tab-pane key="1" tab="登录日志">
            <LoginLog ref="loginLog" :queryParam="loginLogQueryParam" :tableY="tableY" @clearAll="clearAll"></LoginLog>
          </a-tab-pane>
          <a-tab-pane key="2" tab="操作日志">
            <OperationLog ref="operationLog" :queryParam="oLogQueryParam" :tableY="tableY"
                          @handleEdit="handleEdit" @clearAll="clearAll"></OperationLog>
          </a-tab-pane>
        </a-tabs>
      </div>
      <!-- dialog	 -->
      <edit-form
          ref="createModal"
          :visible="visible"
          :model="mdl"
          @cancel="handleCancel()"
          :type="detailType"
      />
    </div>
  </template>
  
  <script>
  import {mapState} from "vuex";
  import moment from 'moment';
  
  import LoginLog from './loginLog.vue'
  import OperationLog from './operationLog.vue'
  import editForm from '../edit.vue'
  
  export default {
    name: "index",
    components: {
      LoginLog,
      OperationLog,
      editForm,
    },
    mounted() {
      this.resizeHandler()
      this.initResizeEvent()
    },
    data() {
      return {
        visible: false,
        activeKey: '1',
        loginLogQueryParam: {
          startTime: [],
          userNameId: ''
        },
        oLogQueryParam: {
          startTime: [],
          userNameId: '',
          operationType: 'requestLog.01'
        },
        pageClientHeight: '',
        toolbarHeight: '',
        mdl: null,
        detailType: '',
        startTime: []
      }
    },
    computed: {
      tableY() {
        return this.pageClientHeight - this.toolbarHeight - 195
      },
      ...mapState("setting", [
        "divisionBar",
      ]),
    },
    watch: {
      //tabBar样式变化 重新计算
      divisionBar() {
        this.$nextTick(() => {
          this.resizeHandler()
        })
      }
    },
    methods: {
      handleCancel() {
        this.visible = false
        this.mdl = null
      },
      handleEdit(record, type) {
        this.visible = true
        this.mdl = record
        this.detailType = type
      },
      //监听resize
      initResizeEvent() {
        window.addEventListener("resize", this.resizeHandler, false);
      },
      resizeHandler() {
        // 获取页面内容的高度
        this.pageClientHeight = document.getElementsByClassName(
            "page-common-layout"
        )[0]?.clientHeight;
        this.toolbarHeight = document.getElementsByClassName(
            "toolbar"
        )[0]?.clientHeight;
      },
      moment,
      //登录日志
      startTimeOnChange1(val) {
        this.loginLogQueryParam.startTime = val.join(',')
      },
      // 操作日志
      startTimeOnChange2(val) {
        this.oLogQueryParam.startTime = val.join(',')
      },
      tabsChange(key) {
        this.activeKey = key
        this.startTime = []
        this.loginLogQueryParam = {
          startTime: [],
          userNameId: ''
        }
        this.oLogQueryParam = {
          startTime: [],
          userNameId: '',
          operationType: 'requestLog.01'
        }
      },
      clearAll(){
        const that = this;
        let url = "/system/sysOperationLog/deleteAllSysOperationLogData";
        let operationType = undefined;
        let containKey = undefined
        if (that.activeKey == 1) {
          url = "/system/sysLoginLog/deleteAllSysLogLogin";
        } else if (that.activeKey == 2) {
          operationType = "requestLog.01";
        }
        that.$confirm({
          title: that.$ct("tips","提示"),
          content: "确定要删除所有数据吗？",
          okText: that.$ct("confirm","确定"),
          cancelText: that.$ct("cancel","取消"),
          closable: true,
          icon: () => that.$createElement('a-icon', {
            props: {
              key: 'warning',
              type: 'exclamation-circle',
              twoToneColor: '#faad14'
            }
          }),
          onOk() {
            return new Promise((resolve, reject) => {
              // 在这里调用删除接口
              that.$post(url, {operationType, containKey }).then((res) => {
                if (res.statusCode === 200) {
                  that.$message.success(res.message, 1.5)
                  if (that.activeKey == 1) {
                    that.$refs.loginLog.$refs.table.refresh();
                  } else if (that.activeKey == 2) {
                    that.$refs.operationLog.$refs.table.refresh();
                  }
                  resolve();
                } else {
                  that.$message.error(res.message, 1.5)
                  reject();
                }
              });
            });
          }
        })
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  /deep/ .division-bar {
    margin: 5px -10px 0px -10px !important;
  }
  
  /deep/ .ant-table {
    /*margin-bottom: 45px;*/
  }
  </style>
  